前幾天一直在處理一件事：
怎麼讓 AI 把教材變得更好懂？
從一開始只有文字整理，到後來有 Visual Flow、Concept Map、Comparison，再到 PDF 裡的公式、圖表和波形也能被看見，Visual Learning Lab 已經慢慢可以把一份教材重新整理成比較適合學習的樣子。
但今天我突然想到一個很日常的問題。
就算教材已經被整理過了，我還是可能有某一句看不懂。
以前遇到這種狀況，我通常會：
看到一個不懂的地方
↓
複製那句話
↓
打開 ChatGPT
↓
貼上去
↓
再補一句：
「這是在講某某教材，可以解釋一下嗎？」
其實也不是多麻煩。
但如果一堂課裡一直遇到這種情況，每次都要重新複製、重新補上下文，久了就很打斷閱讀。
所以 Day 9 我想試一個第一次比較像「互動式學習工具」的功能：
Explain This。
看到哪裡不懂，就直接在原本的教材旁邊點一下。
不用離開現在的頁面，也不用重新把上下文講一次。
我最一開始想到的其實更理想。
例如直接反白任意一句：
轉差是感應馬達產生轉矩的重要條件
然後跳出：
Explain this
Why?
Give me an example
Show me visually
甚至 Concept Map 上的節點也可以直接點。
但這種做法如果現在就硬做，前端互動會突然複雜很多。
尤其目前還是 Streamlit，要處理瀏覽器裡任意文字 selection、知道使用者到底反白哪一句，再把它跟原本教材 context 接起來，今天可能會直接變成另一個坑。
所以 Explain This v0 我先縮小範圍。
目前只有兩種東西可以直接問：
Key Concepts
Visual Evidence
也就是 AI 已經整理過、而且知道來源位置的內容。
這次我沒有做成一般聊天框。
點下 Explain this 之後，系統會另外呼叫一次 GPT，專門處理這個小問題。
回傳內容目前固定整理成四個部分：
In simple terms
Why it matters
Intuition or example
Source context
第一個就是白話解釋。
第二個是告訴我：
我為什麼需要懂這個？
第三個則盡量給一個直覺、小例子或類比。
最後才補來源。
例如我在 Sinusoids 裡直接點：
Sinusoids
它不只跟我說「正弦波是一種週期訊號」，還會順著目前正在讀的教材解釋：
v(t) = Vₘ cos(ωt + θ)
其中 Vₘ 是振幅、ω 控制變化速度、θ 控制水平相位。
接著再告訴我為什麼這些東西之後會跟 phasors、impedance、admittance 有關。
這跟另外開一個空白 ChatGPT 最大的差別是：
它已經知道我現在在看什麼。
Explain This request 不只是丟一句：
Please explain "Sinusoids"
而是會一起帶上目前已經存在的 context。
例如：
現在選中的 Key Concept
目前整份教材的 Quick Summary
這個 Concept 的來源頁碼
對應頁面的抽取文字
附近的 Key Concepts
Relationships
如果點的是 Visual Evidence，還會知道：
這是 Formula / Graph / Diagram
它在哪一頁
原本 Visual Evidence 怎麼描述它
它的 Learning Value 是什麼
也就是說，使用者不用每次重新說：
我現在在讀正弦波，這是交流電路的教材，第 2 頁有一張圖……
這些 context 系統已經有了。
我接著直接拿 PDF 裡的 Visual Evidence 測。
這一項是在 Page 2：
Graph — Page 2
內容是正弦波 v(t) 的圖形，裡面標出了：
Vₘ
T
t_max
ωt
t
按下 Explain This 之後，它開始把這張圖拆開解釋。
例如：
Vₘ
→ 波形距離中心線的最大幅度
T
→ 完成一個完整週期需要的時間
ω
→ 波形變化的快慢
θ
→ 波形在水平軸上的位移
還會補一句：
如果相鄰兩個波峰相隔 T 秒，那就是這個波形的週期；如果用 ωt 當橫軸，一個完整週期則對應 2π。
這個結果我自己滿喜歡。
因為 Visual Evidence 原本的角色只是告訴我：
「這頁有一張值得看的圖。」
現在開始變成：
「如果你連這張圖都還看不懂，可以直接繼續往下問。」
做到這裡其實有一個技術問題滿重要。
Streamlit 的按鈕被點擊時，整個 script 會 rerun。
如果什麼都不處理，那使用者只是按了一次：
Explain this
有可能變成：
重新讀 PDF
↓
重新跑整份 AI analysis
↓
重新生成 Flow / Concept Map
↓
再跑 Explain This
這樣不只慢，還會莫名多花一堆 API 費用。
所以今天另一個重要的改動，是把主要分析結果保存到：
st.session_state
現在邏輯比較像：
第一次按 Visualize
PDF
↓
完整分析
↓
結果存進 session_state
之後再按：
Explain this
只會：
取出已經存在的 analysis
↓
抓對應 context
↓
送一個比較小的 Explain This request
不會重新分析整份教材。
這個功能從畫面上其實看不出來，但我覺得它對真的要拿來用很重要。
既然已經開始處理 state，我也順便把 Explain This 本身做了簡單的 cache。
系統會根據：
目前這份教材
+
target type
+
target identity
記住這個解釋。
所以如果我剛剛已經問過：
Page 2 這張 sinusoidal graph 是什麼意思？
再點一次同一個 Explain This，不需要重新呼叫 API。
直接把剛剛的結果拿回來。
但只要重新分析另一份教材，舊的 Explain This 就會清掉，不會把上一份教材的解釋亂帶過來。
這次開始第一次真的需要認真想：
AI 功能不是「能 call API」就結束了。
如果每按一個按鈕就重新算全部東西，就算功能正確，產品用起來還是會很怪。
Explain This 還有一個我很在意的地方。
例如 AI 為了讓我更好懂，可能會補一些教材裡沒有直接寫出的背景知識。
這本身不一定是壞事。
問題是不能讓使用者以為：
「這些全部都是原始 PDF 寫的。」
所以 Explain This 最下面會留一個 Source context。
例如：
來源：PDF 第 2 頁
已使用來源材料，並加入一般概念說明。
也就是把：
教材直接支持的資訊
和：
AI 為了教學補充的一般知識
稍微分開。
這件事還是延續前幾天 Source Check 的方向。
視覺化做得越漂亮、解釋講得越自然，我反而越不希望來源變得模糊。
目前 Explain This 還不是我最終想要的樣子。
現在可以點：
Key Concept
Visual Evidence
但還不能：
點 Concept Map 節點
點 Flow 裡某一步
點 Comparison 的某個儲存格
反白任意一句文字
繼續問「我還是不懂」
選擇「講簡單一點」
選擇「給我一個例子」
這些我都覺得很適合後面慢慢加。
例如未來 Concept Map 可能會變成：
相位差 φ
↓
[ Explain this ]
白話解釋
為什麼重要
看公式
看波形
回原始教材
甚至不是再開一個 AI Chat。
而是教材本身就可以一層一層展開。
前八天大部分做的事情其實都是：
輸入教材
↓
AI 分析
↓
輸出結果
即使有 Flow、Concept Map、Comparison，本質上還是：
AI 生完，我看。
Day 9 第一次開始變成：
輸入教材
↓
AI 整理
↓
我看到某個地方不懂
↓
直接點它
↓
AI 針對這裡再解釋
這個改動表面上只多了一顆：
Explain this
但我覺得方向差很多。
因為我一開始想做 Visual Learning Lab，不只是想把教材變漂亮。
真正想解的其實是：
當我「看不懂」的那一刻，有沒有辦法立刻幫我跨過去？
以前那個瞬間代表：
離開教材
→ 開 AI
→ 複製
→ 貼上
→ 補 context
→ 問問題
現在第一次變成：
看不懂
↓
Explain this
還很陽春。
但我覺得這開始比較像我真正想做的東西了。
下一步，Visual Learning Lab 已經累積到一個程度，我想先把目前這個版本真正放到網路上。
不只是我自己在 localhost 玩。
而是讓別人真的可以打開一個網址，把自己的教材丟進去。
GitHub Repo：
https://github.com/f24131128-lgtm/visual-learning-lab
iThome鐵人賽
看影片追技術